<%--
  Created by IntelliJ IDEA.
  User: meng
  Date: 2020/5/10
  Time: 19:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>
<html>
<head>
    <title></title>
</head>
<body>
<%--=============================--%>
<div class="content">
    <form name="myform" method="post" action="${pageContext.servletContext.contextPath}/web/person/changePersonNameAndPassword" onsubmit="return checklogin()" id="myform">
        <fieldset>
            <legend>修改账号和密码</legend><br>
            <label>用户名</label>
            <input type="text" name="myname" id="myname" placeholder="${sessionScope.person.personName}" required minlength="2" ><br><br>
            <label id="mimaOld">旧密码</label>
            <input type="text" name="passwordOld" id="passwordOld" placeholder="1~12位的字母和数字" required ><br><br>
            <input type="hidden" name="personId" value="${sessionScope.person.id}">
            <label id="mima">新密码</label>
            <input type="password" name="password" id="password" placeholder="1~12位的字母和数字" required ><img src="${pageContext.servletContext.contextPath}/static/images/web/biyan.png" id="img"><br><br>
            <label>确认新密码</label>
            <input type="password" name="isPassword" id="isPassword" placeholder="" required ><br><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" value="提交" id="submit">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
        </fieldset>
    </form>
</div>
<%--=============================--%>
</body>
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $("#img").click(function () {
        //alert($("#password").prop("type"))
        if ("password"== $("#password").prop("type")){
            $("#password").prop("type","text");
            $("#isPassword").prop("type","text");
            $(this).attr("src","${pageContext.servletContext.contextPath}/static/images/web/yan.png");
        }
        else {
            $("#password").prop("type","password");
            $("#isPassword").prop("type","password");
            $(this).attr("src","${pageContext.servletContext.contextPath}/static/images/web/biyan.png");
        }
    });
    $("#submit").click(function () {
        if($("#password").val()!=$("#isPassword").val()){
            confirm("请重新输入密码!");
            return false;
        }
    });
    $("#passwordOld").blur(function () {
        //alert()
        if ("${sessionScope.person.password}"!=$(this).val()){
            alert("输入不正确！")
            return false;
        }

    });
</script>
<style type="text/css">
    .content{
        margin-top: 120px;
    }
    #myform fieldset
    {
        margin:30px auto;
        width:600px;
        height:300px;
        padding:20px;
        color:blue;
        text-align:center;
    }

    /*label部分CSS才是重点*/
    #myform label
    {
        display: inline-block;
        width: 60px;
        text-align: justify;
        text-align-last: justify;
        margin-right: 10px;
    }
    #mima
    {
        margin-left:34px;
    }
    #myname,#password,#isPassword,#passwordOld
    {
        width: 210px;
    }
    #img
    {
        height: 25px;
        margin-left: 10px;
        margin-top: 0px;
    }
</style>
</html>
